<script lang="tsx">
import type { SizeEnum } from 'tdesign-vue-next';
/**
 * 文本
 * @description 仿[elementu-plus](https://element-plus.org/zh-CN/component/text.html)
 */

export default {
  name: 'RText',
  props: {
    /**
     * 自定义元素标签
     */
    tag: { type: String, default: 'span' },
    /**
     * 大小
     */
    size: { type: String as PropType<SizeEnum>, default: 'medium' },
    /**
     * 类型
     */
    theme: {
      type: String as PropType<
        'default' | 'success' | 'primary' | 'warning' | 'danger'
      >,
      default: 'default'
    }
  },
  setup(props, ctx) {
    const { attrs, slots } = ctx;
    console.log('props', props);
    console.log('ctx', ctx);
    const formatClass = computed(() => {
      const arr = ['t-text', `t-text--theme-${props.theme}`];
      if (props.size === 'small') {
        arr.push('t-size-s');
      } else if (props.size === 'large') {
        arr.push('t-size-l');
      }
      return arr;
    });

    return () =>
      h(
        props.tag,
        {
          class: formatClass.value,
          props: attrs.value
        },
        slots.default?.()
      );
  }
};
</script>
<style lang="scss" scoped>
.t-text {
  align-self: center;
  padding: 0;
  margin: 0;
  font-size: var(--td-font-link-medium);
  word-break: break-all;

  &--theme {
    @each $type in $theme {
      &-#{$type} {
        @if $type == default {
          color: var(--td-text-color-primary);
        } @else if $type == primary {
          color: var(--td-brand-color);
        } @else if $type == danger {
          color: var(--td-error-color);
        } @else {
          color: var(--td-#{$type}-color);
        }
      }
    }
  }

  &.t-size-s {
    font: var(--td-font-link-small);
  }

  &.t-size-l {
    font: var(--td-font-link-large);
  }
}
</style>
